<template>
    <div class="footer" :style="{'backgroundColor':navigationColor}">
        <div class="content">
            <div class="selectList">
                <el-select class="select" v-model="otherValue" filterable placeholder="全国导航"
                    @change="(e) => { handleChange(e, otherOptions) }">
                    <el-option v-for="item in otherOptions" :key="item.value" :label="item.name"
                        :value="item.portalWebsiteId">
                        {{ item.name }}
                    </el-option>
                </el-select>
                <!-- 市直部门网站 -->
                <el-select class="select" v-model="provincevalue" filterable placeholder="省内导航"
                    @change="(e) => { handleChange(e, provinceOptions) }">
                    <el-option v-for="item in provinceOptions" :key="item.value" :label="item.name"
                        :value="item.portalWebsiteId">
                        {{ item.name }}
                    </el-option>
                </el-select>
                <el-select class="select" v-model="cityValue" filterable placeholder="市内导航"
                    @change="(e) => { handleChange(e, cityOptions) }">
                    <el-option v-for="item in cityOptions" :key="item.value" :label="item.name"
                        :value="item.portalWebsiteId">
                        {{ item.name }}
                    </el-option>
                </el-select>
                <el-select class="select" v-model="districtValue" filterable placeholder="部门导航"
                    @change="(e) => { handleChange(e, districtOptions) }">
                    <el-option v-for="item in districtOptions" :key="item.value" :label="item.name"
                        :value="item.portalWebsiteId">
                        {{ item.name }}
                    </el-option>
                </el-select>
            </div>
            <div class="about">
                <div class="info">
                    <div class="text aboutMe">关于我们 <span class="line">|</span> 隐私声明 <span class="line">|</span> 网站地图
                    </div>
                    <div class="text">
                        <span class="contact" v-show="endData.headerName">网站名称：{{ endData.headerName }}</span>
                        <span class="contact" v-show="endData.organizer">主办单位：{{ endData.organizer }}</span>
                        <span class="contact" v-show="endData.phoneNumber">联系电话：{{ endData.phoneNumber }}</span>
                    </div>
                    <div class="text">
                        <span class="contact" v-show="endData.address">地址：{{ endData.address }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import homepageApi from "@/api/homepage"
import { BackgroundClass } from "quill";
export default {
    name: 'App',
    components: {},
    props: {
        navigationColor: {
            type: String,
            default: '#164fa6'
        },
        endData: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            provincevalue: '',
            cityValue: '',
            districtValue: '',
            otherValue: '',
            provinceOptions: [],
            cityOptions: [],
            districtOptions: [],
            otherOptions: [],
            websiteObj: {}
        }
    },
    mounted() {
        this.queryPortalWebsite();
    },
    methods: {
        handleChange(v, options) {
            console.log(v, options)
            let rut = options.find(item => {
                return item.portalWebsiteId == v
            })
            window.open(rut.url, '_blank');
        },
        async queryPortalWebsite() {
            let { data } = await homepageApi.queryPortalWebsite();
            this.websiteLit = data || [];
            this.websiteObj = {};
            this.websiteLit.forEach(item => {
                if (!this.websiteObj[item.portalWebsiteType]) {
                    this.websiteObj[item.portalWebsiteType] = []
                }
                this.websiteObj[item.portalWebsiteType].push(item)
            })
            this.provinceOptions = this.websiteObj['PROVINCE']
            this.cityOptions = this.websiteObj['CITY']
            this.districtOptions = this.websiteObj['STRAIGHT']
            this.otherOptions = this.websiteObj['OTHER']
        }
    }
}
</script>

<style lang="scss" scoped>
.footer {
    width: 100%;
    background-color: #164fa6;

    .content {
        width: 1200px;
        margin: 0 auto;
    }

    .selectList {
        height: 60px;
        padding: 0 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        border-bottom: 1px solid #ffffff17;

        .select {
            width: calc(25% - 20px);

            ::v-deep .el-input__inner {
                background-color: #ffffff32;
                border: none;
                font-weight: bold;
            }
        }
    }

    .about {
        width: 100%;
        height: 175px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        color: #ffffff;
        font-weight: bold;

        .aboutMe {
            cursor: pointer;

            &:hover {
                background-color: #164fa6;
            }
        }

        .info {
            font-size: 14px;
            line-height: 30px;

            .text {
                display: flex;
                align-items: center;
                justify-content: center;

                .line {
                    padding: 0 15px;
                }

                .gonganLogo {
                    margin: 0 10px;
                }

                .contact {
                    padding: 0 10px;
                }
            }
        }
    }
}

::v-deep .el-input__inner {
    color: #ffffff;
}
</style>